<template>
  <div id="wxs-menus">
    <nav aria-label="breadcrumb" role="navigation">
      <ol class="breadcrumb">
        <li class="breadcrumb-item">微信公众号</li>
        <li class="breadcrumb-item active" aria-current="page">用户管理</li>
        <span class="ms-auto" @click.stop="back()">返回</span>
      </ol>
    </nav>

    <div class="card col-12 mt-4 px-0">
      <div class="card-body">
        <button type="button" class="btn btn-info" @click.stop="syncWxsUsers()">
          同步
        </button>
      </div>
      <table class="table table-sm table-striped">
        <thead>
          <tr>
            <th>昵称</th>
            <th>国家</th>
            <th>省份</th>
            <th>城市</th>
            <th>关注时间</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="info in dataList" :key="`user_` + info.id">
            <td>
              <img :src="info.headimgurl" width="25" height="25" />
              <span
                class="text-truncate"
                style="max-width: 80px"
                >{{ info.nickname }}</span
              >
            </td>
            <td>{{ info.country }}</td>
            <td>{{ info.province }}</td>
            <td>{{ info.city }}</td>
            <td>{{ info.subscribe_time }}</td>
          </tr>
        </tbody>
      </table>
      <nav id="pagination-box" class="float-end">
        <my-pagination
          name="pagination"
          :row-count="sc.rowCount"
          :page-total="sc.pageTotal"
          :page-no="sc.pageNo"
          @next-page="nextPage"
          @prev-page="prevPage"
          @direct-page="directPage"
        ></my-pagination>
      </nav>
    </div>
  </div>
</template>

<script>
import { searchUsers, syncWxsUsers, createCustomMenu } from "@/api/wxs.js";
import { convertLongToTimeDesc } from "@/common/common.js";
import MyPagination from "@/components/my-pagination_h5.vue";

export default {
  components: {
    MyPagination,
  },
  data() {
    return {
      dataList: [],
      name: "",
      orderNum: 0,
      level: 1,
      parentId: 0,
      type: "",
      url: "",
      key: "",
      editing: false,

      sc: {
        rowCount: 0,
        pageNo: 1,
        pageSize: 10,
        pageTotal: 0,
      },
    };
  },
  mounted: function () {
    this.search();
  },
  methods: {
    back: function () {
      this.$router.go(-1);
    },
    showErrMsg: function (msg, msgType) {
      this.$store.dispatch("showAlertMsg", {
        errMsg: msg,
        errMsgType: msgType,
      });
    },
    showLoading: function (loadingText) {
      this.$store.commit("showLoading", {
        loading: true,
        loadingText: loadingText,
      });
    },
    hideLoading: function () {
      this.$store.commit("showLoading", { loading: false });
    },
    search: function () {
      this.showLoading();

      const params = {
        "sc.pageNo": this.sc.pageNo,
        "sc.pageSize": this.sc.pageSize,
      };

      searchUsers(
        params,
        (v) => {
          this.dataList = v.dataList;
          this.sc = v.page;
        },
        () => this.hideLoading()
      );
    },
    syncWxsUsers: function () {
      syncWxsUsers((v) => {
        this.search();
      });
    },
    deleteMenu: function (id) {
      this.showLoading();

      deleteCustomMenu(
        id,
        (jsonResult) => {
          if (jsonResult.status === "OK") {
            this.showErrMsg("已删除");
            this.search();
          } else {
            this.showErrMsg("删除不成功", "danger");
          }
        },
        () => this.hideLoading()
      );
    },
    createMenu: function () {
      this.showLoading();

      var params = {
        name: this.name,
        orderNum: this.orderNum,
        type: this.type,
        level: this.level,
        parentId: this.parentId,
        url: this.url,
        key: this.key,
      };

      createCustomMenu(
        params,
        (jsonResult) => {
          if (jsonResult.status === "OK") {
            this.showErrMsg("已保存");
            this.search();
            this.editing = false;
          } else {
            this.showErrMsg("保存不成功", "danger");
          }
        },
        () => this.hideLoading()
      );
    },
    copyMenu: function (index) {
      const o = this.dataList[index];
      this.name = o.name;
      this.orderNum = o.orderNum;
      this.level = o.level;
      this.parentId = o.parentId;
      this.type = o.type;
      this.url = o.url;
      this.key = o.key;

      this.editing = true;
    },
    newMenu: function () {
      this.reset();
      this.editing = true;
    },
    reset: function () {
      this.editing = false;
      this.name = "";
      this.orderNum = 0;
      this.level = 1;
      this.parentId = 0;
      this.type = "";
      this.url = "";
      this.key = "";
    },
    formatDateTime: function (val) {
      return convertLongToTimeDesc(val);
    },
    prevPage: function () {
      this.sc.pageNo = this.sc.pageNo - 1;
      if (this.sc.pageNo < 1) this.sc.pageNo = 1;
      this.search();
    },
    nextPage: function () {
      this.sc.pageNo = this.sc.pageNo + 1;
      this.search();
    },
    directPage: function (pageNo) {
      this.sc.pageNo = pageNo;
      this.search();
    },
  },
};
</script>
